<!--
 * @Author: your name
 * @Date: 2021-10-25 16:14:26
 * @LastEditTime: 2021-10-25 16:38:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /gitee-project/whale-admin-web/src/views/main/dashboard/components/serviceEcharts/serviceEcharts/orderStatistics.vue
-->
<template>
  <div class="echart-center">
    <el-card shadow="never">
      <div id="saleStatistics"></div>
    </el-card>
  </div>
</template>

<script lang="ts">
import { useEventListener } from '@vueuse/core' // 引入监听函数，监听在vue实例中可自动销毁，无须手动销毁
import { defineComponent, reactive, ref, nextTick, onMounted } from "vue";
import * as echarts from "echarts";
type EChartsOption = echarts.EChartsOption;
export default defineComponent({
  props: {
    weekResult:{
      type: Array,
      default: []
    }
  },
  setup(props, ctx) {
    console.log(props.weekResult)
    let timeDatas = []
    let resDatas = []
    for(let i = 0; i < props.weekResult.length; i++){
      timeDatas.push(props.weekResult[i].date)
      resDatas.push(props.weekResult[i].total)
    }
    let timeData = ref(timeDatas)
    let resData = ref(resDatas)
    onMounted(() => {
      nextTick(() => {
        initEchats();
      });
    });
    const initEchats = () => {
      var chartDom: any = document.querySelector("#saleStatistics");
      var myChart = echarts.init(chartDom);
      var option: EChartsOption;
      option = reactive({
        title: {
          text: "销售统计",
          textStyle: {
            //文字颜色
            color: "#000",
            //字体风格,'normal','italic','oblique'
            fontStyle: "normal",
            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            fontWeight: "bold",
            //字体系列
            fontFamily: "sans-serif",
            //字体大小
            fontSize: 16
          }
        },
        tooltip: {
          trigger: "axis"
          // axisPointer: {
          //   type: 'cross',
          //   crossStyle: {
          //     color: '#999'
          //   }
          // }
        },
        toolbox: {
          show: true,
          feature: {
            // dataZoom: {
            //   yAxisIndex: "none"
            // },
            // dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          axisPointer: {
            type: "shadow"
          },
          axisLabel: {
            color: "#666",
            interval: 0, // 坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
            rotate: 45
          },
          data: timeData
        },
        grid: {
          left: "15%",
          // right: "4%",
          // bottom: "3%",
          // containLabel: true
        },
        yAxis: {
          type: "value",
          name: '销售额(元)',
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed"
            }
          },
          axisLine:{
            show: true,
            lineStyle: {
              // type: "dashed",
              color: '#666',
            }
          }
        },
        series: [
          {
            data: resData,
            type: "line",
            animationDuration: 1000,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#36cfca" },
                { offset: 0.5, color: "#36cfca" },
                { offset: 1, color: "#36cfca" }
              ])
            }
          }
        ]
      });
      option && myChart.setOption(option);
      useEventListener("resize", () => {
        myChart.resize();
      });
    };
    return {
      initEchats,
      timeData,
      resData
    };
  }
});
</script>

<style lang="scss" scoped>
.echart-center {
  #saleStatistics {
    width: 100%;
    height: 400px;
  }
}
</style>